<template>
  <div class="promotion">
    <div class="container">
      <h2>优惠券专区</h2>
      <div class="promotion-list">
        <div class="promotion-item" v-for="coupon in promotionList" :key="coupon.id">
          <div class="coupon-card">
            <div class="coupon-left">
              <div class="coupon-value">
                <span class="currency">¥</span>
                <span class="amount">{{ coupon.value }}</span>
              </div>
              <div class="coupon-condition" v-if="coupon.type === 1">
                满{{ coupon.minAmount }}元可用
              </div>
              <div class="coupon-condition" v-else>
                无门槛优惠券
              </div>
            </div>
            <div class="coupon-right">
              <h3 class="coupon-name">{{ coupon.name }}</h3>
              <div class="coupon-info">
                <div class="coupon-scope">
                  {{ coupon.platformWide ? '全平台通用' : '指定店铺可用' }}
                </div>
                <div class="coupon-time">
                  {{ formatDate(coupon.startTime) }} - {{ formatDate(coupon.endTime) }}
                </div>
                <div class="coupon-limit" v-if="coupon.seckillStart">
                  <span class="seckill-tag">秒杀</span>
                  剩余: {{ getRemainingCount(coupon) }}张
                </div>
                <div class="coupon-limit" v-else>
                  每人限领{{ coupon.perUserLimit }}张
                </div>
              </div>
              <div class="coupon-action">
                <button 
                  class="get-coupon-btn" 
                  :class="{ 'received': isReceived(coupon) }"
                  @click="receiveCoupon(coupon)"
                  :disabled="isReceived(coupon) || loading"
                >
                  {{ isReceived(coupon) ? '已领取' : '立即领取' }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue'
import { receiveCouponApi } from '@/api/coupon'
import { ElMessage } from 'element-plus'

const props = defineProps({
  promotionList: {
    type: Array,
    default: () => []
  }
})

const loading = ref(false)

// 检查优惠券是否已领取
const isReceived = (coupon) => {
  // 后端返回的数据中，status=1 表示可用状态，received=true 表示已领取
  return coupon.received === true;
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getMonth() + 1}.${date.getDate()}`;
}

// 获取剩余数量
const getRemainingCount = (coupon) => {
  return coupon.remainingCount || 0;
}

// 领取优惠券
const receiveCoupon = async (coupon) => {
  if (isReceived(coupon)) return;
  
  try {
    loading.value = true;
    await receiveCouponApi(coupon.id);
    
    // 更新优惠券状态
    coupon.received = true;
    
    ElMessage({
      message: '优惠券领取成功',
      type: 'success',
      duration: 2000
    });
  } catch (error) {
    console.error('领取优惠券失败:', error);
    
    // 检查错误信息，如果是已领取过的错误，也更新状态
    if (error.message && (error.message.includes('已领取') || error.message.includes('已经领取'))) {
      coupon.received = true;
    }
    
    ElMessage({
      message: error.message || '领取失败，请稍后再试',
      type: 'error',
      duration: 2000
    });
  } finally {
    loading.value = false;
  }
}

// 组件挂载时检查优惠券状态
onMounted(() => {
  console.log('优惠券列表:', props.promotionList);
})
</script>

<style scoped>
.promotion {
  padding: 30px 0;
  background-color: #f8f8f8;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  position: relative;
  padding-left: 15px;
}

h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #ff6700;
  border-radius: 2px;
}

.promotion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}

.promotion-item {
  width: calc(50% - 10px);
}

.coupon-card {
  display: flex;
  background: linear-gradient(135deg, #ff6700, #ff9500);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 103, 0, 0.15);
  position: relative;
  height: 120px;
}

.coupon-card::before {
  content: '';
  position: absolute;
  left: 25%;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f8f8f8;
  box-shadow: 0 125px 0 #f8f8f8;
  z-index: 1;
}

.coupon-card::after {
  content: '';
  position: absolute;
  left: 25%;
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 2px dashed rgba(255, 255, 255, 0.3);
}

.coupon-left {
  width: 25%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.coupon-value {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}

.currency {
  font-size: 18px;
  vertical-align: top;
}

.coupon-condition {
  font-size: 12px;
  margin-top: 8px;
  white-space: nowrap;
}

.coupon-right {
  width: 75%;
  padding: 15px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-info {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.coupon-scope {
  margin-bottom: 2px;
}

.coupon-time {
  margin-bottom: 2px;
}

.coupon-limit {
  display: flex;
  align-items: center;
}

.seckill-tag {
  background-color: #ff4d4f;
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
  margin-right: 5px;
}

.coupon-action {
  margin-top: 10px;
  text-align: right;
}

.get-coupon-btn {
  background-color: #ff6700;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 5px 15px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.get-coupon-btn:hover:not(:disabled) {
  background-color: #ff5000;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 103, 0, 0.3);
}

.get-coupon-btn.received {
  background-color: #999;
  cursor: not-allowed;
}

.get-coupon-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

@media screen and (max-width: 768px) {
  .promotion-item {
    width: 100%;
  }
  
  .coupon-card {
    height: 100px;
  }
  
  .coupon-value {
    font-size: 24px;
  }
  
  .currency {
    font-size: 14px;
  }
}
</style>